<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title><!--{$title}--> -<!--{$config_core.seo_title}--></title>
	<meta name="keywords" content="<!--{$config_core.head_keywords}-->" />
	<meta name="description" content="<!--{$config_core.head_description}-->" />
	<meta http-equiv="x-ua-compatible" content="ie=7" />
	<meta name="generator" content="CityBao System" />
	<meta name="author" content="www.citybao.net" />
	<link href="<!--{$INSTALL_PATH}-->favicon.ico" rel="shortcut icon" />
	<link href="<!--{$INSTALL_PATH}-->favicon.ico" rel="bookmark" />
	<link href="<!--{$CSS_DIR}-->citybao.css" rel="stylesheet" type="text/css" />
	<link href="<!--{$CSS_DIR}-->member.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" href="<!--{$CSS_DIR}-->jquery.Jcrop.css" type="text/css" />
	<script type="text/javascript" language="javascript">
		var CB_CssPath = '<!--{$CSS_DIR}-->';
		var CB_ImgPath = '<!--{$IMG_DIR}-->';
		var CB_JsPath  = '<!--{$JS_DIR}-->';
		<!--{if $SAFE_DOMAIN != ''}-->
		document.domain = '<!--{$SAFE_DOMAIN}-->';
		<!--{/if}-->
	</script>
	<script type="text/javascript" src="<!--{$JS_DIR}-->jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="<!--{$JS_DIR}-->member-menu.js"></script>
	<script type="text/javascript" src="<!--{$JS_DIR}-->jquery.Jcrop.js"></script>
	<script type="text/javascript" src="<!--{$JS_DIR}-->jQuery.AvatarEditor.js"></script>
	<script type="text/javascript" src="<!--{$JS_DIR}-->Dialog.js"></script>
	<script type="text/javascript">
		//允许上传的图片类型
		var extensions = 'jpg,jpeg,gif,png';
		
		var AvatarEditor = new jQuery.AvatarEditor({
			//主图片所在容器ID
			content : "avatar_editor",
			purviews : [{id:"big",width:180,height:180},{id:"middle",width:50,height:50},{id:"small",width:30,height:30}],
			selector : {width:180,height:180}
		});
		var avatar_list,avatar_editor,sava_button,flag = false;
		
		function checkFile(){
			var path = $('#file').val();
			var ext = getExt(path);
			var re = new RegExp("(^|\\s|,)" + ext + "($|\\s|,)", "ig");
			$("#filename").val(path);
			if(extensions != '' && (re.exec(extensions) == null || ext == '')) {
				Dialog("错误","text:对不起，只能上传jpg, gif, png类型的图片！","400","150",true,"5000",true);
				$('#file').val('');
				return false;
			}
			$("#loading").show();
			$("#upform").submit();
			return true;
		}
		
		function uploadresult(msg){
			$("#loading").hide();
			if(msg.search("ok")>=0){
				if(flag == false){
					$(".right-part").html(avatar_list);
					$(".left-part").html(avatar_editor);
					flag = true;
					$(".right-part").append(sava_button);
					AvatarEditor.init();
				}
				url = msg.substr(3);
				url = '<!--{$INSTALL_PATH}-->'+url;
				AvatarEditor.reload(url)
			}else{
				alert(msg);
			}
		}

		function save(){
			var param = AvatarEditor.submit();
			$.ajax({
				url:'<!--{$INSTALL_PATH}-->member/avatar.php?action=uploadsave',
				type: "POST",
				data:param,
				success:function(responseText){
					if(responseText.search("OK")>=0){
						Dialog("成功","text:恭喜您，头像保存成功！","400","150",true,"5000",true);
						window.location.reload();
					}else{
					alert(responseText);
						Dialog("错误","text:对不起，头像保存失败！","400","150",true,"5000",true);
					}
				}
			});
		}
		
		function getExt(path){
			return path.lastIndexOf('.') == -1 ? '' : path.substr(path.lastIndexOf('.') + 1, path.length).toLowerCase();
		}
		
		function getComponent(cid){
			var e = $("#components").children().has("#"+cid);
			var html = e.html();
			e.remove();
			return html;
		}
		
		function addComponent(html){
			$("#components").append('<div class="component">'+html+'</div>');
		}
		
		function initPage(){
			$(".left-part").html(avatar_list)
		}
		
		$(function() {
			avatar_list = getComponent("avatar-list");
			avatar_editor = getComponent("avatar_editor");
			sava_button = getComponent("sava_button");
			initPage();
		});
		</script>
</head>
<body>
<!--{include file='header.tpl'}-->
<!--{assign var='guide_suffix' value='上传新头像'}-->
<!--{include file='guide.tpl'}-->
<div id="container" class="clearfix">
	<!--{include file='member/member-menu.tpl'}-->
	<div class="member-main" id="member-main">
		<div class="fillet filletColor7">
			<b class="fillet1"></b><b class="fillet2"></b><b class="fillet3"></b><b class="fillet4"></b>
			<div class="filletContent padding10">
				<form enctype="multipart/form-data" method="post" name="upform" target="upload_target" id="upform" action="<!--{$INSTALL_PATH}-->member/avatar.php?action=upload">
				<div class="text-change">
					<input type="file" name="file" id="file" size="1" onchange="checkFile();" />
					<span class="fBlue" style="z-index:999; cursor:pointer;">上传图片</span>
					<span class="fGray marginLeft5" id="upload_tip">仅JPG、GIF、PNG格式，且小于5M</span>
				</div>
				<div id='upload-part' class="widgets-col2 tCenter">
					<span class="hide" id="loading"><img src="<!--{$IMG_DIR}-->ajaxloading.gif" align="absmiddle" /> 上传中，请稍侯......</span>
					<div class="left-part column">
						
					</div>
					<div class="center-part column">&nbsp;</div>
					<div class="right-part column">
						<div id="definition_tip" class="fOrange">您上传的头像会自动生成三种尺寸，请注意小尺寸图像是否清晰。</div>
					</div>
				</div>
				</form>
				<iframe src="about:blank" name="upload_target" id="upload_target" height="0" width="0" style="display:none;"></iframe>
			</div>
			<b class="fillet5"></b><b class="fillet6"></b><b class="fillet7"></b><b class="fillet8"></b>
		</div>
	</div>
</div>
<div id="components" class="hide">
	<div class="component">
	<!-- 头像列表组件-->
		<div id="avatar-list">
			<div class="fLeft w50">
				<div class="big clearfix">
					<div id="big">
						<img src="<!--{$INSTALL_PATH}-->member/avatar.php?size=big" alt="" />
					</div>
					<span>大尺寸头像：180*180像素</span>
				</div>
			</div>
			<div class="fRight clearfix w50">
				<div class="middle clearfix">
					<div id="middle">
						<img src="<!--{$INSTALL_PATH}-->member/avatar.php?size=middle" alt="" />
					</div>
					<span class="zoom">中尺寸头像50*50像素（自动生成）</span>
				</div>
				<div class="clear"></div>
				<div class="small clearfix">
					<div id="small">
						<img src="<!--{$INSTALL_PATH}-->member/avatar.php?size=small" alt="" />
					</div>
					<span class="zoom">小尺寸头像30*30像素（自动生成）</span>
				</div>
			</div>
		</div>
	</div>
	<div class="component">
	<!--图像编辑框组件-->
		<div id="avatar_editor">
			<img src="" />
		</div>
	</div>
	<div class="component">
	<!--保存按钮组件-->
		<div id="sava_button" class="clear marginTop10">
			<a  href="javascript:void(0);" class="btn" onclick="javascript:save();"><span><span>保 存</span></span></a>&nbsp;&nbsp;
			<a href="javascript:void(0);" class="btn" onclick="javascript:window.location.reload();"><span><span>取 消</span></span></a>
		</div>
	</div>
</div>
<!--{include file='footer.tpl'}-->
</body>
</html>